Component({
  options: {
    addGlobalClass: true
  },
  properties: {
    checked: {
      type: Boolean,
      value: false,
      observer(val) {
        this.setData({ selfChecked: val })
      }
    },
    activedColor: {
      type: null,
      observer: 'setStyle'
    },
    inActivedColor: {
      type: null,
      observer: 'setStyle'
    }
  },
  methods: {
    onCheckboxChange(e) {
      const selfChecked = e.detail.value.length > 0
      this.setData({ selfChecked })
      this.triggerEvent('onchange', selfChecked)
    },
    setStyle() {
      const { activedColor, inActivedColor } = this.data
      let switchStyle = ''
      if (this.isDef(activedColor)) {
        switchStyle += `--actived-color:${activedColor};`
      }
      if (this.isDef(inActivedColor)) {
        switchStyle += `--inactived-color:${inActivedColor};`
      }
      this.setData({ switchStyle })
    },
    isDef(value) {
      return value !== undefined && value !== null
    }
  }
})
